<template>
    <div class="tmpl">
        <!--1.0分类-->
        <div class="cate" >
            <ul id="cateul" >
                <li>
                    <a @click="getimglist(0)">全部</a>
                </li>
                <li v-for="item in catelist">
                    <a @click="getimglist(item.id)">{{item.title}}</a>
                </li>
            </ul>
        </div>
        <!--2.0图片列表-->
        <div class="imglist">
            <ul>
                <li v-for="item in list">
                    <router-link v-bind='{to:"/photo/photoInfo/" + item.id}'>
                        <img v-lazy="item.img_url">
                    </router-link>
                    <p >
                        <span class="title" v-text="item.title"></span><br>
                        {{item.zhaiyao}}
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>
<style scoped>

    /*懒加载图片样式begin*/
    .imglist p{
        color: #fff;
        position: absolute;
        bottom:0px;
        left:0;
        background-color: rgba(0,0,0,0.3);
        height: 20px;
        overflow: hidden;
    }
    .imglist .title{
        font-weight:bold;
    }
    .imglist ul{
        padding:0;
    }
    .imglist li{
        list-style: none;
        position: relative;
    }
    .imglist img{
        width:100%;
        height:300px;
    }
    image[lazy=loading]{
        width: 100%;
        height: 300px;
        margin:auto;
    }
    /*懒加载图片样式end*/

    /*分类样式开始*/
    .cate{
        max-width:400px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .cate ul{
        min-width:320px;
        margin:5px;
    }
    .cate li{
        list-style: none;
        display: inline-block;
    }
    .cate li a{
        color: #0094ff;
        font-size: 16px;
        /*border:1px solid gray;*/
        border-radius: 5px;
        padding:5px;
    }
    /*分类样式结束*/
</style>
<script>
    import common from '../../kits/common.js';
    //导入正在加载，虽然main.js已经全局导入，但这里在js中要使用还需要再次导入********************************************************
    import {Indicator} from 'mint-ui';
    export default{
        data(){
            return{
                catelist:[],  //存储分类数据的数组
                list:[]
            }
        },
        created(){
            this.getcate();
            this.getimglist(0); //默认加载全部图片
        },
        methods:{
            //1.0获取图片的分类数据
            getcate(){
                let url = common.apihost + '/api/getimgcategory';
                this.$http.get(url).then(
                    res=>{
                        this.catelist = res.body.message;

                        //根据当前分类的个数计算出整个ul的宽度，动态赋值
                        let w = 72 * (res.body.message.length + 1);
                        document.getElementById('cateul').style.width = w + 'px';
                    },
                    res=>{
                        console.log('分类数据获取失败');
                    }
                );
            },
            //2.0根据分类id获取图片数据
            getimglist(cateid){
//                console.log(cateid)
                //这个位置应该提醒用户正在加载中***********************************************************************
                Indicator.open('正在加载中...');

                let url = common.apihost + '/api/getimages/' + cateid;
                this.$http.get(url).then(
                    res=>{
                        //由于服务器返回的img_url只是路径部分，应该要拼接上前缀
                        let imghost = common.imghost;
                        //遍历res.body.message
                        res.body.message.forEach(item=>{
                            item.img_url = imghost + item.img_url;
                        });

                        this.list = res.body.message;

                        //在这里关闭正在加载中*************************************************************************
                        Indicator.close();
                    },
                    res=>{
                        console.log('获取分类具体图片失败')
                    }
                );
            }
        }
    }
</script>